<script setup>

import {
  ref,
  onMounted,
  toRefs,
  computed,
  reactive,
  watch,
  nextTick,
  onUnmounted,
  watchEffect,
} from "vue";
// 加载中组件
import Loding from "./components/Loding.vue";
// 头部组件
import navBack from "../components/navBack.vue";
// 定量选择弹窗
import QuantitativeChoice from "./components/QuantitativeChoice.vue";
// 消耗提示弹窗
import ConsumptionHint from "@/views/shotstack/components/dialogComponent/ConsumptionHint.vue";
// 生成视频弹窗
import saveVideoDialog from "./components/MemberRecharge.vue";
// icon
import {
  VideoCameraAddOutlined,
  CaretRightOutlined,
  PlayCircleOutlined,
} from "@ant-design/icons-vue";
// 路由
import { useRouter, useRoute } from "vue-router";
// 导入工具和模拟数据
import { filterArr } from "../utools/index.js";
// 可编辑头部
import EditableHead from "@/views/shotstack/MuseMixedCut/components/EditableHead.vue";
// 仓库
import store from "@/store";
import awaitDialog from "@/views/shotstack/components/dialogComponent/awaitDialog.vue";

import utils from "@/common/utils/utils.js";
// 预览的手机相关数据
import Vue3DraggableResizable from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
// 封装的请求
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import MaterialsModule from "@/views/shotstack/components/MaterialsModule/index.vue";
import SaveVideo from "@/views/shotstack/MuseMixedCut/MixedCutPreview/components/SaveVideo.vue";
import { set } from "lodash";
import { onBeforeRouteLeave } from "vue-router";
const route = useRoute();
const router = useRouter();

// 读取配置, 阿里云或者原生
const work_ai_config = computed(() => {
  return store?.state?.shotstack?.work_ai_config || {};
});

const state = reactive({
  coverForm: {
    poster_url: "",
  },
});
// 初始化页面
const queryData = ref({
  id: "",
  page: 1,
  // pageSize: 10,
  pageSize: work_ai_config.value?.shotstack_driver == "alionline" ? 20 : 10,
  // pageSize: work_ai_config.value?.shotstack_driver == "alionline" ? 3 : 3,
  category: [],
  duration: [], // 待优化  点击掉接口
});
// 切换加载中状态
const isLoding = ref(false);
const loadingIng = ref(true);
const loadingIng_spain = ref(true);

// 当前列表返回的视频总量
const video_num = ref(0);

// 剩余剪辑次数数量
const splitNum = ref(0);

// 预估的总数据量
const videoAllnum = ref(0);

// 勾选类型, 分为定量和常规勾选
const selectType = ref("");

// 最后一页的数量信息
const lastPageData = computed(() => {
  // 最后一页
  const lastPage = Math.ceil(videoAllnum.value / queryData.value.pageSize);
  // 最后一页的数量(如果正好等于pageSize, 则返回pageSize)
  const lastPageNum =
    videoAllnum.value % queryData.value.pageSize || queryData.value.pageSize;
  return {
    lastPage,
    lastPageNum,
  };
});

// 占位符卡片需要加载的数量
const cartNum = computed(() => {
  // 如果总数小于当前页面数量，则返回总数
  if (videoAllnum.value < queryData.value.pageSize) {
    return +videoAllnum.value - showVideoData.value.length;
  } else {
    // 如果是最后一页, 返回最后一页的数量, 减去已展示卡片的数量
    if (queryData.value.page == lastPageData.value.lastPage) {
      return lastPageData.value.lastPageNum - showVideoData.value.length;
    } else {
      // 否则展示页面数量减去已展示卡片的数量
      return queryData.value.pageSize - showVideoData.value.length;
    }
  }
});

watch(
  () => videoAllnum.value,
  (nv, ov) => {
    if (nv) {
      // total总量变化, 当前页码在最后一页, 并且变化之后 最后一页没有数据了, 将页码返回到total变化后的最后一页
      const lastPage = Math.ceil(nv / queryData.value.page);
      if (queryData.value.page > lastPage) {
        // debugger
        queryData.value.page = lastPage;
        getAllData();
      }
    }
  }
);
watch(
  () => videoAllnum.value,
  (nv, ov) => {
    if (nv) {
      // total总量变化, 当前页码在最后一页, 并且变化之后 最后一页没有数据了, 将页码返回到total变化后的最后一页
      const lastPage = Math.ceil(nv / queryData.value.page);
      if (queryData.value.page > lastPage) {
        // debugger
        queryData.value.page = lastPage;
        getAllData();
      }
    }
  }
);

const videoElement = ref(null);
const currentVideoUrl = ref("");

// 展示的视频列表
const showVideoData = ref([]);

// 可编辑标题
const titleText = computed(() => route.query.name + " - 预览");

// 高亮选中的项
const actives = ref([
  {
    name: "视频类型",
    activeList: [3],
  },
  {
    name: "视频时长",
    activeList: [0],
  },
]);

// 所有的视频数据, 包含勾选的信息
const allVideoData = ref([]);

// 存放所有的勾选数据
const setAllVideoData = (data) => {
  // 存放数组数据
  if (Array.isArray(data) && data.length) {
    data.forEach((ele) => {
      const find = allVideoData.value.find((item) => item.id === ele.id);
      if (find) {
        find.checked = ele.checked;
      } else {
        allVideoData.value.push(ele);
      }
    });
  } else {
    // 存放单项数据
    const find = allVideoData.value.find((item) => item.id === data.id);
    if (find) {
      find.checked = data.checked;
    } else {
      allVideoData.value.push(data);
    }
  }
};

// 处理列表勾选事件
const handelChecked = (item) => {
  item.checked = !item.checked;
  nextTick(() => {
    setAllVideoData(JSON.parse(JSON.stringify(item)));
  });
};

// 选择筛选项
const selectFilter = (item, type) => {
  let isIndex;
  type == "视频类型" ? (isIndex = 0) : (isIndex = 1);

  let target = actives.value[isIndex].activeList;

  if (type == "视频时长") {
    // 0代表点击的是'全部'按钮
    if (item.id == 0) {
      // 那么替换现在所有的高亮选项, 点亮'全部'按钮
      target.splice(0, target.length, 0);
    } else {
      // 判断当前选项是否已经选中
      const index = target.findIndex((ele) => ele == item.id);
      if (index !== -1) {
        target.splice(index, 1);
        target.length == 0 && target.push(0);
      } else {
        const zeroIndex = target.findIndex((ele) => ele == 0);
        zeroIndex !== -1 && target.splice(zeroIndex, 1);
        target.push(item.id);
      }
    }
  } else {
    // loadingIng.value = false
    if (item.id == 3) {
      // 那么替换现在所有的高亮选项, 点亮'全部'按钮
      target.splice(0, target.length, 3);
    } else {
      // 判断当前选项是否已经选中
      const index = target.findIndex((ele) => ele == item.id);
      if (index !== -1) {
        // 选中的话 则删除此项, 如果删除之后数组为空 则'全部'按钮点亮
        target.splice(index, 1);
        target.length == 0 && target.push(3);
      } else {
        // 未选中的话 则点亮当前选项, 并且删除'全部'按钮的高亮
        const zeroIndex = target.findIndex((ele) => ele == 3);
        zeroIndex !== -1 && target.splice(zeroIndex, 1);
        target.push(item.id);
      }
    }
  }

  if (type == "视频类型") {
    queryData.value.category = target;
  } else {
    queryData.value.duration = target;
  }

  if (queryData.value.duration[0] == 0) {
    queryData.value.duration = [];
  }
  if (queryData.value.category[0] == 3) {
    queryData.value.category = [];
  }

  showVideoData.value = [];
  queryData.value.page = 1;
  getAllData();
};

const radioType = computed(() => store.getters.clipJSON?.aspect_ratio);
// 加载效果
const loading = ref(false);
// 动态样式
const resizableStyle = computed(() => {
  return {
    backgroundImage: `url(https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png), url(${state.coverForm.poster_url}), url(https://hf.pigcms.com/static/wxapp/images/phone_black_back.png)`,
    backgroundSize: "100% auto",
    backgroundPosition: "center center",
    backgroundRepeat: "no-repeat",
    width: "360px",
    height:
      radioType.value == "1:1"
        ? "360px"
        : radioType.value == "16:9"
        ? "202.5px"
        : "640px",
  };
});

// 预览控制变量
const preview = ref(false);
// 当前预览的项
const previewItem = ref(null);
// 收起预览
const closePreview = () => {
  preview.value = false;
  previewItem.value = null;
};

// 展开预览
const showVideo_R = ref("");
const openPreview = (item) => {
  preview.value = true;
  previewItem.value = item.id;
  showVideo_R.value = item.video_url;
};

// 底部视频卡片全选
const selectAll = () => {
  const isChecked = showVideoData.value.every((item) => item.checked);
  showVideoData.value.forEach((ele) => {
    ele.checked = !isChecked;
  });
  setAllVideoData(JSON.parse(JSON.stringify(showVideoData.value)));

  // allVideoData.value.forEach((item) => {
  //   item.checked = !isChecked;
  // });

  // if (allVideoData.value.every((item) => item.checked)) {
  //   allVideoData.value.forEach((item) => {
  //     item.checked = false;
  //   });
  //   showVideoData.value.forEach(ele => {
  //     ele.checked = false
  //   })
  // } else {
  //   allVideoData.value.forEach((item) => {
  //     item.checked = true;
  //   });
  //   showVideoData.value.forEach(ele => {
  //     ele.checked = true
  //   })
  // }
};

// 定量选择
const dialog = ref(null); // 弹窗组件实例
const handleSelectVideo = () => {
  dialog.value && dialog.value.showModal();
};

const cloneCheckData = ref({
  checked_num: "",
  checkedIds: [],
});
const cloneChecked_num = ref(0);

// 定量选择 弹窗点击确定回调
const handleOk = async (val) => {
  // 缓存之前的勾选数量
  cloneCheckData.value.checked_num = JSON.parse(
    JSON.stringify(saveData.value.checked_num)
  );
  cloneCheckData.value.checkedIds = JSON.parse(
    JSON.stringify(checkedIds.value)
  );

  saveData.value.id = route.query.id;
  saveData.value.checked_num = val;
  saveData.value.checkedIds = [];

  if (val > 0) {
    await getUserBalance();
    // 选择的视频 大于剪辑次数
    if (val > splitNum.value) {
      return message.error("剪辑次数不足!");
    }
    // 设置勾选类型
    selectType.value = "dignliang";
    ConsumptionHintRef.value.showModal();
  } else {
    message.warn("请先选择视频!");
  }
  // saveVisible.value = true;

  // for (let i = 0; i < val && i < allVideoData.value.length; i++) {
  //   allVideoData.value[i].checked = true;
  // }
  // // 同步更新渲染视频的选中状态
  // if (showVideoData.value.length) {
  //   nextTick(() => {
  //     showVideoData.value.forEach(ele => {
  //       const find = allVideoData.value.find(item => item.id == ele.id)
  //       find && (ele.checked = find.checked)
  //     })
  //   })
  // }
};

const onCancel = () => {
  resetSubmitData();
  saveVisible.value = false;
};

// 重置定量选择提交数据
const resetSubmitData = () => {
  if (
    cloneCheckData.value.checked_num != "" &&
    cloneCheckData.value.checkedIds.length
  ) {
    saveData.value.checked_num = JSON.parse(
      JSON.stringify(cloneCheckData.value.checked_num)
    );
    saveData.value.checkedIds = JSON.parse(
      JSON.stringify(cloneCheckData.value.checkedIds)
    );
    checkedIds.value = JSON.parse(
      JSON.stringify(cloneCheckData.value.checkedIds)
    );
  }
};

// 生成视频
const saveData = ref({
  id: "",
  // 勾选的数量
  checked_num: "",
  // 勾选的id数组
  checkedIds: "",
});
const saveVisible = ref(false);

// 消耗提示组件
const ConsumptionHintRef = ref(null);

// 获取剪辑次数
const getUserBalance = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/user/statistic");
  console.log(res, "剪辑次数");
  const find = res?.result.find((ele) => ele.title == "剪辑余额（条）");
  if (!!find) {
    splitNum.value = find.num;
  }
};

// 保存混剪
const saveVideo = async () => {
  if (checked_num.value > 0) {
    await getUserBalance();
    // 选择的视频 大于剪辑次数
    if (checked_num.value > splitNum.value) {
      return message.error("剪辑次数不足!");
    }
    saveData.value.id = route.query.qid;
    saveData.value.checked_num = checked_num.value;
    saveData.value.checkedIds = checkedIds.value;
    ConsumptionHintRef.value.showModal();
    ConsumptionHintRef.value.showModal();
  } else {
    message.warn("请先选择视频!");
  }
};

// 确认保存, 打开文件夹选择
const isSubmit = () => {
  if (selectType.value != "dignliang") {
    saveData.value.checked_num = checked_num.value;
    saveData.value.checkedIds = checkedIds.value;
  } else {
    // 此值已经在定量选择弹窗中赋值过了
    // saveData.value.checked_num = val;
    // 定量不需要id 数组
    saveData.value.checkedIds = [];
  }
  // 判断完毕重置勾选类型
  selectType.value = "";
  saveData.value.id = route.query.qid;
  saveVisible.value = true;

  // return
  // saveData.value.id = route.query.id;
  // saveData.value.checked_num = checked_num.value;
  // saveData.value.checkedIds = checkedIds.value;
  // saveVisible.value = true;
};

const timerId = ref(null);
const maxlength = ref(0);
const video_isdoning = ref(0);
// 初始化页面
const initData = async () => {
  queryData.value.id = route.query.qid;
  isLoding.value = false;
};

const handlePageChange = (page, pageSize) => {
  queryData.value.page = page;
  getAllData();
};

// 轮训列表数据
const getAllData = async () => {
  if (timerId.value) {
    clearInterval(timerId.value);
  }

  const res = await request.get(
    "/work_ai",
    `/user/shotstack/preview/list`,
    queryData.value
  );

  video_isdoning.value = res.result.total;
  video_num.value = res.result.total;

  if (res.result.data.length > 0) {
    const nowArr = res.result.data.map((ele) => {
      // return
      const find = allVideoData.value.find((item) => item.id === ele.id);
      let category;

      if (Array.isArray(tipAll.value) && tipAll.value.length) {
        category =
          tipAll.value.find((val) => val.shotstack_id == ele.id)?.category ||
          null;
      }
      return {
        ...ele,
        checked: !!find ? find.checked : false,
        category: category || null,
      };
    });

    setAllVideoData(JSON.parse(JSON.stringify(nowArr)));
    showVideoData.value = JSON.parse(JSON.stringify(nowArr));

    updateFilterValues(res.result);

    // 处理每个卡片 底下的展示小卡片

    // showVideoData.value.forEach((v1) => {

    //   if (v1.resources.length) {
    //     v1.resources.forEach((v2) => {
    //       if (v2.type == "video") {
    //       }
    //     });
    //   }
    //   // currentVideoUrl.value = v1.video_url;
    //   // if (videoElement.value) {
    //   //   videoElement.value.load();
    //   // }
    // });
  } else {
    showVideoData.value = [];
  }

  if (res.result.all_done == false) {
    // 视频还在生成  继续轮训

    if (showVideoData.value.length < queryData.value.pageSize) {
      loadingIng.value = true;
      loadingIng_spain.value = true;
      loadingIng_spain.value = true;
    } else {
      // loadingIng.value = false;
      // loadingIng_spain.value = false
    }
    timerId.value = setTimeout(() => {
      getAllData();
      return;
    }, 5000);
  } else if (res.result.all_done == true) {
    loadingIng.value = false;
    loadingIng_spain.value = false;
    loadingIng_spain.value = false;
    // 成功了
    maxlength.value = res.result.total;

    isTotalquest.value = false;
    isTotalquest.value == false;
    updateFilterValues(res.result);
    videoAllnum.value = res.result.total;
    // addTip();
  }
};

// 视频打上标签
const updateFilterValues = (result) => {
  filterArr.value[0].items[0].num =
    result.category_common +
    result.category_repetition_low +
    result.category_repetition_low_extremely;
  filterArr.value[0].items[3].num = result.category_common;
  filterArr.value[0].items[2].num = result.category_repetition_low;
  filterArr.value[0].items[1].num = result.category_repetition_low_extremely;
};
const timerIds = ref(null);
const tipAll = ref([]);
// 获取视频类型 接口
const videoType = async () => {
  const res = await request.get("/work_ai", `/user/shotstack/category`, {
    id: route.query.qid,
  });
  if (res.result.all_done == false) {
    tipAll.value = res.result.list;
    addTip();
    // 视频还在生成  继续轮训
    timerIds.value = setTimeout(() => {
      videoType();
      return;
    }, 5000);
  } else {
    tipAll.value = res.result.list;
    addTip();
  }
};

// 添加标签的方法
const addTip = () => {
  if (showVideoData.value.length > 0 && tipAll.value.length > 0) {
    showVideoData.value.forEach((ele) => {
      if (!ele.category) {
        const find = tipAll.value.find((v2) => v2.shotstack_id == ele.id);
        ele.category = find ? find.category : null;
      }
    });
  }
};

// watchEffect(() => {
//   if (tipAll.value.length > 0 && allVideoData.value.length > 0) {
//     // 对showVideoData进行更新，将匹配到的category添加进去
//     allVideoData.value.forEach(ele => {
//       if (!ele.category) {
//         const find = tipAll.value.find((v2) => v2.id == ele.id);
//         ele.category = find ? find.category : null;
//       }
//     })
//   }
// });

// 正在切片 接口

const timeloading = ref(null);
const istimeloading = ref(true);
const flag = ref(false);

const isTotalquest = ref(true);
const LoadingType = async () => {
  clearTimeout(timeloading.value);
  const res = await request.get("/work_ai", `/user/shotstack/preview/total`, {
    id: route.query.qid,
  });
  if (res && res.total == 0) {
    // 视频还在生成  继续轮训
    timeloading.value = setTimeout(() => {
      LoadingType();
      return;
    }, 5000);
  } else if (res && res.total > 0) {
    // list接口 轮询结束的话， 不进行total的赋值
    if (isTotalquest.value) {
      videoAllnum.value != res.total && (videoAllnum.value = res.total);
    }
    istimeloading.value = false;

    if (!flag.value) {
      getAllData();
      videoType();
      flag.value = true;
    }

    if (loadingIng.value == true) {
      timeloading.value = setTimeout(() => {
        LoadingType();
      }, 5000);
    }
  }

  // setTimeout(() => {
  //   videoAllnum.value = 6
  //   loadingIng.value = false
  // }, 5000)
};

// 计算当前视频项是否全选
const isAllselect = computed(() => {
  return allVideoData.value.every((item) => item.checked);
});

// 计算当前视频项选中的个数
const checked_num = computed(() => {
  return allVideoData.value.filter((item) => item.checked).length;
});

const checkedIds = computed(() => {
  return allVideoData.value
    .filter((item) => item.checked)
    .map((item) => item.id);
});

// 选择文件夹 的保存按钮  在这调生成高质量视频的接口
const saveName = ref({});
// 生成高质量视频
const finshaData = ref({
  id: route.query.qid,
  shotstack_response_num: "",
  shotstack_response_ids: "",
  folder_id: "",
});

// 点击确定
const awaitModel = ref(null);
const saveFn = (options, id) => {
  finshaData.value.folder_id = id;
  finshaData.value.shotstack_response_num = saveData.value.checked_num;
  finshaData.value.shotstack_response_ids = saveData.value.checkedIds;
  request
    .put("/work_ai", `/user/shotstack/preview/high`, finshaData.value)
    .then((res) => {
      if (res.code == 10011) {
        // 请求失败
        message.warn(res.msg);
      } else {
        // 请求成功!
        awaitModel.value && awaitModel.value.showModal();
      }
    });
  saveVisible.value = false;
};

const videoContentBoxRef = ref(null);
const items = ref([]);
const page = ref(1);

// 页面卸载时清理定时器
onUnmounted(() => {
  // window.removeEventListener("scroll", () => { })
  filterArr.value[0].items[0].num = 0;
  filterArr.value[0].items[3].num = 0;
  filterArr.value[0].items[2].num = 0;
  filterArr.value[0].items[1].num = 0;

  if (timerId.value !== null) {
    clearInterval(timerId.value);
  }
  timerId.value = null;

  if (timerIds.value !== null) {
    clearInterval(timerIds.value);
  }
  timerIds.value = null;

  if (timeloading.value !== null) {
    clearTimeout(timeloading.value);
  }
  timeloading.value = null;
});

// 点击返回
const backClick = () => {
  if (loadingIng_spain.value == true) {
    router.push("/workShotstack/creationCenter/MixedCutIntroduction");
  } else {
    router.push(`/mixedCutCreat`);
  }
};

// 退回混剪列表页
const backliebiao = () => {
  router.push("/workShotstack/creationCenter/MixedCutIntroduction");
};

onBeforeRouteLeave((to, from, next) => {
  // 保存之后的跳转, 允许正常跳转
  if (to.name == "ComposeMaterial" || to.name == "MixedCutIntroduction") {
    next(true);
    return;
  }

  // debugger;
  // 退回的页面必须为mixedCutCreat 并且要有参数, 并且不能有isAi参数
  if (
    to.name == "mixedCutCreat" &&
    !!Object.keys(to.query).length &&
    !to.query.isAi
  ) {
    next(true);
    return;
  }
  if (route.query.isAi == "true") {
    router.push(
      `/mixedCutCreat?id=${route.query.qid}&key=id&viewType=2&openType=edit`
    );
  } else {
    let baseQuery = `id=${route.query.id}`;
    const dynamicQueryParams = Object.keys(route.query)
      .filter((key) => key !== "id" && key !== "qid")
      .map((key) => `${key}=${encodeURIComponent(route.query[key])}`);

    if (!dynamicQueryParams.some((param) => param.startsWith("key="))) {
      dynamicQueryParams.push(`key=id`);
    }
    const fullQuery =
      dynamicQueryParams.length > 0
        ? `?${baseQuery}&${dynamicQueryParams.join("&")}`
        : `?${baseQuery}`;
    router.push(`/mixedCutCreat${fullQuery}`);
  }
  next(false);
});

// 模拟加载
onMounted(() => {
  LoadingType();
  initData();
});
</script>

<template>
  <a-config-provider prefix-cls="ss">
    <div class="MixedCutPreview">
      <template v-if="isLoding">
        <Loding />
      </template>
      <template v-else>
        <!-- 头部组件 -->
        <navBack
          @backClick="backClick"
          :contentConfig="{
            title: '混剪项目2024/3/28',
            isShow: true,
          }"
          :leftConfig="{
            isShow: true,
          }"
          :rightConfig="{
            isShow: true,
            content: '',
          }"
        >
          <template #content_text>
            <EditableHead
              :titleText="titleText"
              :disabled="true"
            ></EditableHead>
          </template>
          <template #right_btns>
            <a-button
              type="primary"
              @click="saveVideo"
              :disabled="checked_num == 0"
            >
              <div style="border-radius: 8px; overflow: hidden">
                <VideoCameraAddOutlined />
                <span style="margin-left: 7px">生成视频</span>
              </div>
            </a-button>
          </template>
        </navBack>

        <!-- {{ saveData.checked_num + 'saveData.value' }}
        <br>
        {{ saveData.checkedIds + 'saveData.value' }} -->

        <!-- 下方整体 -->
        <div class="content_box">
          <div class="left_content_box">
            <div class="content_box_mind">
              <!-- 筛选框 -->
              <div class="filter_box">
                <div class="filter_item" style="margin-bottom: 16px">
                  <span class="filter_title">视频类型</span>
                  <div class="select_item_box">
                    <div
                      :class="{
                        active_select: actives[0].activeList.includes(ele.id),
                      }"
                      class="select_item"
                      @click="selectFilter(ele, '视频类型')"
                      v-for="ele in filterArr[0].items"
                      :key="ele.id"
                    >
                      {{ ele.name }} ({{ ele.num }})
                    </div>
                  </div>
                </div>
                <div class="filter_item">
                  <span class="filter_title">视频时长</span>
                  <div class="select_item_box">
                    <div
                      class="select_item"
                      :class="{
                        active_select: actives[1].activeList.includes(ele.id),
                      }"
                      @click="selectFilter(ele, '视频时长')"
                      v-for="ele in filterArr[1].items"
                      :key="ele.id"
                    >
                      {{ ele.name }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 选择和操作栏 -->
              <div class="selection_and_operation">
                <div class="left_content">
                  {{ nowvideo }}
                  <span style="margin-left: 10px" v-if="loadingIng">
                    <span
                      v-if="istimeloading"
                      style="display: flex; align-items: center"
                    >
                      视频切片中
                      <a-spin
                        :indicator="indicator"
                        style="margin: 5px 0 0 20px"
                      />
                    </span>
                    <span v-else style="display: flex; align-items: center">
                      预计生成视频: {{ videoAllnum }} , 已生成视频:
                      {{ video_isdoning }}
                      <a-spin
                        v-if="loadingIng_spain"
                        :indicator="indicator"
                        style="margin: 5px 0 0 20px"
                      />

                      <span
                        v-if="loadingIng_spain"
                        class="Text_back"
                        @click="backliebiao"
                        >后台处理中,您可以返回混剪列表进行其他操作</span
                      >

                      <!-- type="primary" -->
                      <a-button
                        v-if="loadingIng_spain"
                        type="link"
                        class="Text_back_btn"
                        @click="backliebiao"
                        >返回</a-button
                      >
                    </span>
                  </span>
                  <span v-else>当前视频数量 ({{ video_num }})</span>
                  <!-- <a-button type="link">低重复率视频少？点击查看解决方案</a-button>/ -->
                </div>
                <div class="right_content">
                  <span
                    >已选择
                    <span class="select_num">{{ checked_num }}</span>
                    个视频</span
                  >
                  <a-button
                    class="right_content_btn"
                    type="primary"
                    @click="handleSelectVideo"
                    >定量选择</a-button
                  >
                  <a-button
                    class="right_content_btn"
                    type="primary"
                    @click="selectAll"
                    >{{ isAllselect ? "取消全选" : "全选" }}</a-button
                  >
                </div>
              </div>
              <!-- 底部视频整体 @scroll="handleScroll" -->
              <div class="video_content">
                <div class="video_content_box" ref="videoContentBoxRef">
                  <template v-if="showVideoData.length">
                    <div
                      v-for="i in showVideoData"
                      :key="i.id"
                      class="video_item video_img_cart"
                      :class="{ active_video_item: i.id == previewItem }"
                      @click="handelChecked(i)"
                    >
                      <!-- 右上角标签 -->

                      <!-- 中间的预览 -->
                      <div style="height: 100%" class="box">
                        <span class="right_tag">{{ i.category }}</span>
                        <!-- 左上角勾选 -->
                        <a-checkbox
                          @click.stop="handelChecked(i)"
                          class="checkbox_item"
                          v-model:checked="i.checked"
                        ></a-checkbox>
                        <PlayCircleOutlined
                          class="play_icon"
                          @click.stop="openPreview(i)"
                        ></PlayCircleOutlined>

                        <img
                          v-if="i.poster_url"
                          :src="i.poster_url"
                          alt=""
                          style="width: 100%; height: 100%"
                        />
                        <!-- <video v-if="i.video_url" style="height: 100%" :src="i.video_url"></video> -->
                        <div v-if="!i.poster_url" class="bg-b">
                          <video
                            v-if="i.resources[0].type == 'video'"
                            style="width: 100%; height: 100%"
                            :src="i.resources[0].material_url"
                          ></video>
                          <div
                            v-else
                            class="video_img_cartss"
                            :style="`background-image: url(${i.resources[0].material_url}); background-size: cover;
                          background-repeat: no-repeat;
                          background-position: center;
                            `"
                          ></div>
                        </div>
                      </div>
                      <!-- 底部同组卡片展示 -->
                      <div class="bottom_card_box">
                        <template v-if="i.resources.length">
                          <div
                            class="bottom_card_item video_img_cart"
                            v-for="v1 in i.resources"
                            :key="v1.id"
                          >
                            <video
                              v-if="v1.type == 'video'"
                              style="width: 36px; height: 100%"
                              :src="v1.material_url"
                            ></video>
                            <div
                              v-else
                              class="bottom_card_item video_img_cart"
                              :style="`background-image: url(${v1.material_url});`"
                            ></div>
                          </div>
                          <!-- :getPopupContainer="(triggerNode) => {return triggerNode.closest('.bottom_card_box');}" -->
                          <a-popover trigger="click" placement="bottomLeft">
                            <template #content>
                              <div class="insert-card">
                                <div class="horver_box">
                                  <div
                                    class="horver_item"
                                    v-for="v1 in i.resources.slice(5)"
                                    :key="v1.id"
                                  >
                                    <video
                                      v-if="v1.type == 'video'"
                                      style="width: 100%; height: 100%"
                                      :src="v1.material_url"
                                    ></video>
                                    <div
                                      v-else
                                      class="bottom_card_item video_img_cart"
                                      :style="`background-image: url(${v1.material_url}); background-repeat: repeat; background-size: 100% 100%;`"
                                    ></div>
                                  </div>
                                </div>
                              </div>
                            </template>
                            <div
                              @click.stop="() => {}"
                              class="bottom_card_info"
                              v-if="i.resources.length > 5"
                            >
                              +{{ i.resources.length - 5 }}
                            </div>
                          </a-popover>
                        </template>
                      </div>
                    </div>
                  </template>

                  <template v-if="cartNum >= 1">
                    <div class="loding_item" v-for="i in cartNum" :key="i">
                      <div class="loding_progress">
                        <a-progress
                          :percent="100"
                          :showInfo="false"
                          type="line"
                          size="small"
                          :stroke-color="{
                            '0%': '#108ee9',
                            '100%': '#87d068',
                          }"
                          status="active"
                        />
                      </div>
                      <span class="loding_text">生成中, 预计还需2分钟</span>
                      <div class="loding_dec">
                        <span>
                          <LoadingOutlined></LoadingOutlined>
                        </span>
                        <span class="loding_dec_text">正在合成视频......</span>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <a-pagination
                style="margin: 32px 0"
                @change="handlePageChange"
                v-model:current="queryData.page"
                v-model:pageSize="queryData.pageSize"
                :total="videoAllnum"
                show-size-changer
              />
            </div>
          </div>
          <!-- 视频预览 -->
          <transition name="fade">
            <!-- v-show="preview" -->
            <div class="video_preview" v-show="preview">
              <div class="preview_heider">
                <h2>视频预览</h2>
                <span @click="closePreview"
                  >收起预览
                  <CaretRightOutlined />
                </span>
              </div>
              <div style="color: red; font-size: 14px; margin-bottom: 5px">
                预览播放低像素视频，正式生成会产出高像素视频
              </div>
              <div id="phoneConCover" class="left_phone_view">
                <a-spin
                  style="width: 100%; height: 640px; z-index: 1000"
                  :spinning="loading"
                >
                  <video
                    style="width: 100%; height: 100%"
                    controls
                    autoplay
                    :src="showVideo_R"
                    preload="auto"
                  ></video>

                  <!-- <video style="width: 100%; height: 100%" controls autoplay preload="auto">
                    <source :src="showVideo_R" type="video/mp4" @error="handleVideoError" />
                    <source :src="showVideo_R" type="video/quicktime" />
                    <source :src="showVideo_R" type="video/mpeg" />
                    <source :src="showVideo_R" type="video/3gpp" />
                  </video> -->

                  <DraggableContainer
                    :style="resizableStyle"
                    :referenceLineColor="'white'"
                  >
                    <Vue3DraggableResizable
                      v-show="item.copywriting"
                      v-for="(item, index) in coverList"
                      :key="'art_con' + index"
                      :initW="coverList[index].width"
                      :initH="coverList[index].height"
                      v-model:x="coverList[index].elLeft"
                      v-model:y="coverList[index].elTop"
                      v-model:w="coverList[index].width"
                      v-model:h="coverList[index].height"
                      v-model:active="coverList[index].active"
                      :draggable="true"
                      :resizable="true"
                      :parent="true"
                    >
                      <div
                        @click.stop="getPosition(index)"
                        :style="coverStyle(item, index)"
                      >
                        {{ item.copywriting }}
                      </div>
                    </Vue3DraggableResizable>
                  </DraggableContainer>
                </a-spin>
              </div>
            </div>
          </transition>
        </div>
      </template>
      <!-- 定量选择 弹窗 -->
      <QuantitativeChoice
        ref="dialog"
        @handleOk="handleOk"
        :max="maxlength"
      ></QuantitativeChoice>
      <!-- 保存视频弹窗 -->
      <awaitDialog ref="awaitModel" @isClose="resetSubmitData"></awaitDialog>
      <!-- 消耗提示组件 -->
      <ConsumptionHint
        ref="ConsumptionHintRef"
        :checked_num="saveData.checked_num"
        :splitNum="splitNum"
        @handleOk="isSubmit"
      >
      </ConsumptionHint>
      <!-- 视频预加载 -->
      <video
        ref="videoElement"
        style="display: none"
        muted
        controls
        autoplay
        preload="auto"
        :src="currentVideoUrl"
      ></video>
      <!-- 保存到文件夹弹窗@selfSubmit="saveVideoData"  -->
      <MaterialsModule
        ref="materials"
        jobCategory="videoSplit"
        :aisave="true"
        :requestType="true"
        :material_type="'video'"
        :isFlaking="true"
        @saveName="saveFn"
        @selfRequest="saveVideoData"
        :visible="saveVisible"
        :data="currentSaveData"
        @onCancel="onCancel"
      />
    </div>
  </a-config-provider>
</template>

<style lang="less" scoped>
// 给预览的元素显示和隐藏添加过渡效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-to {
  opacity: 0;
}

// 手机样式
.left_phone_view {
  width: 360px;
  height: 730px;
  // flex: 1;
  background-color: #000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
}

.MixedCutPreview {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content_box {
    flex: 1;
    display: flex;
    // overflow: hidden;
    overflow-y: auto;

    // 视频图片卡片公用样式
    .video_img_cart {
      transition: all 0.2s ease 0s;
      border-radius: inherit;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    // 视频预览
    .video_preview {
      padding: 26px 50px;
      display: flex;
      flex-direction: column;
      background: #f6f7fb;

      .preview_heider {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;

        h2 {
          color: #1c1f23;
          font-size: 16px;
          font-weight: 600;
          margin: 0;
        }

        span {
          font-size: 14px;
          color: #1c1f2399;
          cursor: pointer;
        }
      }

      .left_phone_view {
        // flex: 1;
        height: 750px;
      }
    }

    .left_content_box {
      // flex: 1;
      flex: 1;
      min-width: 740px;
      padding: 32px;
      display: flex;
      flex-direction: column;

      .content_box_mind {
        flex: 1;
        // min-width: 740px;
        // padding: 32px;
        display: flex;
        flex-direction: column;

        // 视频预览列表
        .video_content {
          flex: 1;
          display: flex;
          // overflow: hidden;
          overflow-y: auto;

          .video_content_box {
            // flex: 1;
            // height: 10%;
            // overflow-y: auto;
            // width: 100%;
            width: 1850px;
            // width: 1650px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(155px, 155.13px));
            grid-auto-rows: 280px;
            grid-gap: 25px;
            padding: 10px;
            padding-right: 10px;
            position: relative;

            &::-webkit-scrollbar {
              cursor: pointer;
              width: 8px;
            }

            &::-webkit-scrollbar-thumb {
              background: #888;
              /* 滑块的背景颜色 */
              border-radius: 10px;
              /* 滑块的圆角 */
            }

            .loding_item {
              height: 100%;
              width: 100%;
              background-color: #ebebeb;
              align-items: center;
              padding: 15px;
              position: relative;
              overflow: hidden;
              cursor: pointer;
              border-radius: 5px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 10px;

              .loding_progress {
                width: 100%;
              }

              .loding_text {
                font-weight: 600;
              }

              .loding_dec {
                .loding_dec_text {
                  color: #9b9b9b;
                  margin-left: 5px;
                }
              }
            }

            .video_item {
              position: relative;
              overflow: hidden;
              cursor: pointer;
              border: 2px solid #ffffff;
              border-radius: 3px;

              .box {
                // position: relative;

                &:hover {
                  & .play_icon {
                    opacity: 1;
                    z-index: 99;
                  }
                }

                // 播放按钮
                .play_icon {
                  font-size: 50px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: var(--ss-tag-bgc-color);
                  transition: all 0.4s;
                  opacity: 0;
                  z-index: -99;

                  &:hover {
                    color: var(--ss-primary-color);
                  }
                }
              }

              // max-width: 220px;

              .bottom_card_box {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 20%;
                width: 100%;
                background: rgba(2, 8, 20, 0.8);
                display: flex;
                padding: 3px;
                align-items: center;
                // flex-wrap: nowrap;
                justify-content: flex-start;
                gap: 3px;
                overflow: hidden;
                z-index: 10;

                // overflow-x: auto;
                // padding-bottom: 4px;

                // &::-webkit-scrollbar {
                //     cursor: pointer;
                //     height: 4px;
                //     /* 滚动条的高度，垂直滚动条可能用得上 */
                // }

                // &::-webkit-scrollbar-thumb {
                //     cursor: grab;
                //     background: #888;
                //     /* 滑块的背景颜色 */
                //     border-radius: 10px;
                //     /* 滑块的圆角 */

                // }

                .bottom_card_item {
                  flex-shrink: 0;
                  width: 36px;
                  height: 100%;
                }
              }

              .bottom_card_info {
                position: absolute;
                color: #fff;
                bottom: 4px;
                right: 1px;
                width: 37px;
                height: 49px;
                line-height: 49px;
                text-align: center;
              }

              // 左上角勾选
              .checkbox_item {
                position: absolute;
                left: 5px;
                top: 5px;
              }

              // 右上角标签
              .right_tag {
                width: 70px;
                background-color: #87d068;
                border-radius: 3px;
                color: #fff;
                font-size: 10px;
                position: absolute;
                right: 5px;
                top: 7px;
                line-height: 19px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
              }
            }

            .active_video_item {
              border-color: #7af3ff;

              & .play_icon {
                opacity: 1;
                z-index: 99;
                color: #7af3ff;
              }
            }
          }
        }

        // 选择框
        .selection_and_operation {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 24px;
          padding-bottom: 14px;
          border-bottom: 1px solid rgba(28, 31, 35, 0.08);

          .left_content {
            display: flex;
            align-items: center;
          }

          .right_content {
            display: flex;
            align-items: center;
            gap: 10px;

            .select_num {
              color: #1759dd;
            }

            .right_content_btn {
              border-radius: 4px;
              overflow: hidden;
            }
          }
        }

        // 筛选框
        .filter_box {
          .filter_item {
            display: flex;
            align-items: center;

            .filter_title {
              padding: 3px 5px;
              width: 90px;
              font-size: 14px;
              color: #1c1f2399;
            }

            .select_item_box {
              display: flex;
              align-items: center;

              .select_item {
                cursor: pointer;
                margin-right: 10px;
                padding: 8px 14px;
                font-size: 14px;
                color: #1c1f2399;

                &:hover {
                  background-color: var(--ss-tag-bgc-color);
                }
              }

              // 高亮选中
              .active_select {
                background-color: var(--ss-tag-bgc-color);
                // color: #1c1f23;
                color: var(--ss-primary-color);
                font-weight: 600;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
}

.horver_box {
  display: flex;
  width: 325px;
  flex-wrap: wrap;

  .horver_item {
    width: 60px;
    height: 100px;
    margin-right: 5px;
    background-color: #000;
    display: flex;
    justify-content: center;
  }
}

.ant-popover-inner {
  background-color: #999 !important;
}

.Text_back {
  color: red;
  margin-left: 10px;
  cursor: pointer;
}

.Text_back_btn {
  margin-left: 5px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 14px;
}

.video_img_cartss {
  transition: all 0.2s ease 0s;
  border-radius: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.bg-b {
  background-color: #000;
  width: 100%;
  height: 100%;
}
</style>
